<template>
  <div>
    <el-dialog :visible.sync="registerDialogVisible" @close="closeDialog"
               style="width:100%; padding: 12%; margin: 20px auto;">
      <h2 class="title">注册</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm"
               style="width: 60%; margin: 10px auto;">
        <el-form-item prop="username" label="用户名">
          <el-input type="text" id="userName" v-model="ruleForm.username" style="width: 60%" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="ruleForm.password" style="width: 60%" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="realname" label="真实姓名">
          <el-input type="text" v-model="ruleForm.institute" style="width: 60%" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item prop="telephone" label="手机号">
          <el-input type="tel" v-model="ruleForm.telephone" style="width: 60%" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="qq" label="qq">
          <el-input type="text" v-model="ruleForm.qq" style="width: 60%" placeholder="请输入QQ"></el-input>
        </el-form-item>
        <el-form-item prop="wxid" label="wxid">
          <el-input type="text" v-model="ruleForm.wxid" style="width: 60%" placeholder="请输入微信"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-input type="text" v-model="ruleForm.gender" style="width: 60%" placeholder="请输入性别"></el-input>
        </el-form-item>

        <el-form-item label="照片" prop="photo">
          <!--          <el-input v-model="ruleForm.photo"></el-input>-->
          <el-upload
              class="upload-demo"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="appendFile"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>

        </el-form-item>

        <el-form-item prop="province" label="省份">
          <el-input type="text" v-model="ruleForm.province" style="width: 60%" placeholder="请输入省份"></el-input>
        </el-form-item>
        <el-form-item prop="city" label="城市">
          <el-input type="text" v-model="ruleForm.city" style="width: 60%" placeholder="请输入微信"></el-input>
        </el-form-item>
        <el-form-item prop="area" label="区域">
          <el-input type="text" v-model="ruleForm.area" style="width: 60%" placeholder="请输入性别"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="customer"></el-radio>
            <el-radio label="waiter"></el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button style="width:37%; float: left" @click="cancel">重置</el-button>
          <el-button type="primary" style="width:37%; float:right" @click="register"
                     :loading="registering">确定
          </el-button>

        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import countryOps from '../../../static/json/country.json'
import qs from "qs";

export default {
  name: "registerDialog",
  data() {
    return {
      content: '发送',
      totalTime: 60,
      registerDialogVisible: false,
      registering: false,
      isAble: false,
      fileList:[],
      filename:'',

      selectedPurpose: '',
      ruleForm: {
        username: '',
        password: '',
        phone: '',
        email: '',
        institute: '',
        selectedField: '',
        selectedType: '',
        selectedCountry: '',
        selectedPurpose: '',
        vericode: '',
      },
      rules: {//验证规则在util下的validator文件中
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
        ],

        selectedField:[],
        vericode: [],
        selectedType: [],
        selectedCountry:[],
        selectedPurpose: [],

      },
      correctCode: '',
    };
  },
  methods: {
    cancel() {
      this.$refs.ruleForm.resetFields();

    },
    closeDialog() {
      this.registerDialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },

    register() {

          let that = this;
          let url = that.$URL.addcustomer;
          console.log("filelist")
          console.log(that.fileList)


          let uploadcustomerParams = qs.stringify({
            id: "",
            username: that.ruleForm.username,
            realname: that.ruleForm.realname,
            password: that.ruleForm.password,
            type: that.ruleForm.type,
            qq: that.ruleForm.qq,
            wxid: that.ruleForm.wxid,
            registerTime: that.ruleForm.registerTime,
            lastLoginTime: that.ruleForm.lastLoginTime,
            lastLoginIp: that.ruleForm.lastLoginIp,
            registerIp: that.ruleForm.registerIp,
            gender: that.ruleForm.gender,
            status: that.ruleForm.status,
            idCard: that.ruleForm.idCard,
            idcardPhotoPositive: that.ruleForm.idcardPhotoPositive,
            idcardPhotoNegative: that.ruleForm.idcardPhotoNegative,
            bankCard: that.ruleForm.bankCard,
            bankCardPhoto: that.ruleForm.bankCardPhoto,
            forbiddenReason: that.ruleForm.forbiddenReason,
            province: that.ruleForm.province,
            city: that.ruleForm.city,
            area: that.ruleForm.area,
            rank: that.ruleForm.rank,
            comment: that.ruleForm.comment
          }, {indices: false});
          console.log(uploadcustomerParams)

          console.log(url)
          debugger;
          let y = "http://39.96.93.100:6677/customer/saveOrUpdate"
          that.$axios.post(that.$URL.addcustomer, uploadcustomerParams).then(
              res => {
                if (res.status == 200) {
                  that.$message({
                    message: "注册成功",
                    type: 'success',
                  });
                  //that.$refs.ruleForm.resetFields();
                } else {
                  that.$message({
                    message: "注册失败",
                    type: 'error'
                  });
                }
              }
          );
          this.closeDialog()
        },
    appendFile(file)
    {
      this.filename = file.file
      console.log("filename"+file.file);
      console.log(this.fileList)
      //this.ruleForm.append('file',file.file);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

  },
  created() {
    this.$Bus.$on('showRegister', () => {
      this.registerDialogVisible = true;
    })
    this.countryOptions = countryOps.country;
  },

}
</script>

<style scoped>
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 360px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #605458;
}

.remember {
  margin: 0px 0px 35px 0px;
}

.dialogTitle {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #605458;
}

.el-form-item {
  margin-bottom: 30px;
}

.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 240px;
  float: right;
}

.el-select {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 240px;
  float: right;
}

.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 31%;
}
</style>